import React from "react";
import "./HtmlTag.less";

export default class HtmlTag extends React.Component {
  contentEditableChange = (e) => {
    console.log("触发了！");
    console.log(e);
  };

  render() {
    return (
      <div className="htmlTagWrap">
        <div className="tagName">&lt;details&gt;</div>
        <div className="tagdetails">
          <details>
            <summary>展开/影藏 详情</summary>
            <div className="details">详情内容</div>
          </details>
        </div>
        <div className="tagName">
          contenteditable属性 <br />
          （驼峰写法是contentEditable）
        </div>
        <div className="tagdetails" contentEditable="true">
          <div onBlur={this.contentEditableChange}>这里的内容可以编辑的</div>
        </div>
      </div>
    );
  }
}
